<template>
  <div class="access">
    <div class="flex-space back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
      <el-radio-group v-model="accessType" size="mini" @change="getData">
        <el-radio-button label="0">全部产品</el-radio-button>
        <el-radio-button label="1">已接入过数据</el-radio-button>
        <el-radio-button label="2">近一周未接入数据</el-radio-button>
        <el-radio-button label="3">接入状态异常</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="detailArr.length" v-loading="loading" class="center">
      <access-details v-for="(i, idx) in detailArr" :key="idx" :detail-obj="i" />
    </div>
    <div v-else v-loading="loading" class="no-data">暂无数据</div>
    <!-- 分页器 -->
    <!-- <pagination
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getData"
    />-->
  </div>
</template>

<script>
import { getMetaDataList } from '@/api/milkyway/hostPage'
import accessDetails from './accessDetails.vue'

export default {
  components: { accessDetails },
  data() {
    return {
      // 模式
      accessType: this.$route.query.accessType || 0,
      // 查询参数
      queryParams: {
        size: 10,
        current: 1
      },
      total: 0,
      // 详情列表
      detailArr: [{
        accessTypeVoList: [],
        enterDatabaseTypeVoList: [],
        accessJobVoList: []
      }],
      loading: false
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      this.loading = true
      this.detailArr = []
      getMetaDataList({ accessType: this.accessType }).then(res => {
        this.detailArr = res
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.access {
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .flex-space {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .center {
    margin-top: 10px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    // justify-content: space-between;
    align-content: flex-start;
    .detail {
      width: calc((100% - 40px) / 3);
      margin-top: 20px;
      margin-right: 20px;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
  .no-data{
    display: flex;
    width: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
}
::v-deep {
  .el-radio-button__inner {
    border-radius: 4px !important;
    border-left: 1px solid #dcdfe6;
  }
  .el-radio-button + .el-radio-button .el-radio-button__inner {
    margin-left: 10px;
  }
  .el-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-card__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      .cbottom {
        flex: 1;
      }
    }
  }
}
</style>
